<template>
    <text
        class="icon-default"
        :style="{ color: color, 'font-size': size + 'rpx' }"
        :class="[customIcons]"
        @click="_onClick"></text>
</template>
<script>
/**
 * Icons 图标
 * @description 用于展示 icons 图标
 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
 * @property {Number} size 图标大小
 * @property {String} customIcons 图标图案，图标主题颜色相关class <iconsfont customIcons="icon-kefu,icon-gray-2" size="52"></iconsfont>
 * @property {String} color 图标颜色
 * @event {Function} click 点击 Icon 触发事件
 */
export default {
    name: "iconsfont",
    props: {
        color: {
            type: String,
            default: "",
        },
        size: {
            type: [Number, String],
            default: 32,
        },
        customIcons: {
            type: String,
            default: "",
        },
    },
    data() {
        return {}
    },
    methods: {
        _onClick() {
            this.$emit("click")
        },
    },
}
</script>

<style lang="scss" scoped>
.icon-defalut {
    color: $app-color-text-main;
}
</style>
